<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/log.css">
</head>

<body>
<div class="container">
    <h1>新用户注册</h1>
    <form id="registerForm" onsubmit="return false;">
        <br>
        <span class="o">*</span>
        <label for="username">姓名</label>
        <input type="text" name="username" id="username" class="register"><br><br>

        <span class="o">*</span>
        <label for="sex">性别</label>
        <input type="text" name="sex" id="sex" class="register"><br><br>

        <span class="q">*</span>
        <label for="idnumber">身份证号</label>
        <input type="text" name="idnumber" id="idnumber" class="register"><br><br>

        <span class="p">*</span>
        <label for="phonenumber">手机号</label>
        <input type="text" name="phonenumber" id="phonenumber" class="register"><br><br>

        <span class="q">*</span>
        <label for="pwd">登录密码</label>
        <input type="password" name="pwd" id="pwd" class="register"><br><br>

        <span class="q">*</span>
        <label for="c_pwd">确认密码</label>
        <input type="password" name="c_pwd" id="c_pwd" class="register"><br><br>

        <span class="p">*</span>
        <label for="verify">验证码</label>
        <input type="text" id="verify" name="verify" class="register"><br><br>

        <input type="checkbox" class="checkbox" name="">
        <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
        <br><br>

        <button onclick="registerUser()">同意以上协议并注册</button>
    </form>
</div>

<script>
    function registerUser() {
        var checkbox = document.getElementsByClassName('checkbox')[0];
        if (!checkbox.checked) {
            alert("请先阅读并同意《用户注册协议》！");
            return;
        }

        var pwd = document.getElementById('pwd').value;
        var c_pwd = document.getElementById('c_pwd').value;
        if (pwd !== c_pwd) {
            alert("两次密码输入不一致！");
            return;
        }

        // 组装数据
        var data = {
            username: document.getElementById("username").value,
            password: pwd,
            fullname: document.getElementById("username").value, // 可以直接用姓名
            gender: document.getElementById("sex").value,
            phone: document.getElementById("phonenumber").value,
            id_card: document.getElementById("idnumber").value
        };

        fetch("http://localhost:8080/user/register", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(data)
        })
            .then(res => res.text())
            .then(result => alert(result))
            .catch(err => console.error(err));
    }
</script>
</body>

</html>
